<template>
    <div>
      <div class="table">
        <el-table
          :max-height="maxHeight"
          :show-summary="showSummary"
          :summary-method="summaryMethod"
          :stripe="stripe"
          class="el-easy-ui-table"
          :data="tableData"
          :default-sort="defaultSort"
          :highlightCurrentRow="highlightCurrentRow"
          :border="border"
          @selection-change="selectionChange"
          @sort-change="sortChange"
          @row-click="rowClick"
          @row-dblclick="rowDblClick"
          v-loading = "loading"
          element-loading-text = "拼命加载中"
          style="width: 100%">
          <slot></slot>
        </el-table>
      </div>
      <div class="page">
        <el-pagination
          @size-change="sizeChange"
          @current-change="currentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40, 50, 100]"
          :page-size="pageSizes"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
</template>

<script>
export default {
  name: 'CPageTable',
  props: {
    maxHeight: [String, Number],
    summaryMethod: Function,
    showSummary: Boolean,
    loading: Boolean,
    stripe: Boolean,
    data: {
      type: Object,
      default: function () {
        return {
          records: 0,
          page: 1,
          rows: []
        }
      }
    },
    pageSize: {
      type: Number,
      default: 50
    },
    border: {
      type: Boolean,
      default: true
    },
    /** 是否要高亮当前行 默认: false */
    highlightCurrentRow: Boolean,
    defaultSort: Object
  },
  data () {
    return {
      pageSizes: this.pageSize,
      sidx: '',
      sord: ''
    }
  },
  computed: {
    tableData () {
      return this.data.rows
    },
    total () {
      return this.data.records
    },
    currentPage () {
      return this.data.page
    }
  },
  methods: {
    sizeChange (pageSizes) {
      this.pageSizes = pageSizes
      this.$emit('size-change', pageSizes)
      // 避免页数超过范围时发起多次请求
      if (pageSizes * (this.currentPage - 1) < this.total) {
        this.currentChange(this.currentPage)
      }
    },
    rowClick (row, event, column) {
      this.$emit('row-click', row, event, column)
    },
    currentChange (val) {
      this.$emit('current-change', val)
      this.$emit('select-page', val, this.pageSizes)
    },
    selectionChange (val) {
      this.$emit('selection-change', val)
    },
    sortChange ({prop, order}) {
      /** 第三方库文件 lodash.min.js 文档地址: http://lodashjs.com/docs/ **/
      const lodash = this.$lodash
      if (!lodash.isEmpty(prop)) {
        this.sidx = lodash.snakeCase(prop) // AB转a_b
      } else {
        this.sidx = prop
      }
      if (order === 'ascending') {
        this.sord = 'asc'
      } else if (order === 'descending') {
        this.sord = 'desc'
      } else {
        this.sord = order
      }
      this.$emit('sort-change', {
        sidx: this.sidx,
        sord: this.sord
      })
    },
    rowDblClick (row, event) {
      this.$emit('row-dblclick', row, event)
    }
  }
}
</script>

<style scoped>
  .table {

  }
  .page {
    margin-top: 20px;
    text-align: center;
  }
</style>
